<template>
  <div :id="id" style="height: 30vh;"></div>
</template>
<script>
import * as echarts from "echarts";
require("echarts"); // echarts theme
export default {
  name: "roseEchart",
  data() {
    return {
      chart: null,
      options: {}
    };
  },
  props: {
    listData: {
      type: Array,
      default: () => []
    },
    id: {
      type: String,
      default: ""
    }
  },
  watch: {
    listData: {
      handler(val, newVal) {
        this.initOptions(val);
        this.initCharts();
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    // this.getData();
  },
  mounted() {
    setTimeout(() => {
      this.initOptions(this.listData);
      this.initCharts();
    }, 1000);
  },
  methods: {
    initOptions(list) {
      // this.options = {
      //   tooltip: {
      //     trigger: "item"
      //   },
      //   legend: {
      //     top: "5%",
      //     left: "left"
      //   },
      //   series: [
      //     {
      //       // name: "Access From",
      //       type: "pie",
      //       radius: ["40%", "70%"],
      //       avoidLabelOverlap: false,
      //       itemStyle: {
      //         borderRadius: 10,
      //         borderColor: "#fff",
      //         borderWidth: 2
      //       },
      //       label: {
      //         show: false,
      //         position: "center"
      //       },
      //       emphasis: {
      //         label: {
      //           show: true,
      //           fontSize: 20,
      //           fontWeight: "bold"
      //         }
      //       },
      //       labelLine: {
      //         show: false
      //       },
      //       // data: [
      //       //   { value: 1548, name: "食品生产主体" },
      //       //   { value: 735, name: "食品流通主体" },
      //       //   { value: 580, name: "餐饮服务主体" },
      //       //   { value: 484, name: "特殊食品主体" }
      //       //   // { value: 300, name: "各类食品主体" }
      //       // ]
      //       data: list
      //     }
      //   ]
      // };
      this.options = {
        legend: {},
        tooltip: {
          trigger: "axis",
          showContent: false
        },
        dataset: {
          // source: [
          //   ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
          //   ['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
          //   ['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
          //   ['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
          //   ['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
          // ],
          source: list
        },
        xAxis: { type: "category" },
        yAxis: { gridIndex: 0 },
        grid: { top: "50%" },
        series: [
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" }
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" }
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" }
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" }
          },
          {
            type: "pie",
            id: "pie",
            radius: "30%",
            center: ["50%", "25%"],
            emphasis: {
              focus: "self"
            },
            label: {
              formatter: "{b}: {@1月} ({d}%)"
            },
            encode: {
              itemName: "product",
              value: "1月",
              tooltip: "1月"
            }
          }
        ]
      };
    },
    initCharts() {
      let that = this;
      that.chart = echarts.init(document.getElementById(that.id));
      that.chart.on("updateAxisPointer", function(event) {
        const xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
          const dimension = xAxisInfo.value + 1;
          that.chart.setOption({
            series: {
              id: "pie",
              label: {
                formatter: "{b}: {@[" + dimension + "]} ({d}%)"
              },
              encode: {
                value: dimension,
                tooltip: dimension
              }
            }
          });
        }
      });
      that.chart.setOption(that.options);
    }
  }
};
</script>
